<template>
  <div>
    <!-- 分类模块 -->
    <div class="model">
      <el-row :gutter="$store.state.device == 'pc' ? 30 : 0">
        <el-col :span="span" class="el_col">
          <a href="https://news.sjtu.edu.cn/jdyw/20210104/139419.html">
            <img src="@/assets/images/20210104_013016_163.jpg" alt="" />
            <div class="des">
              <p>校领导带队赴宁德时代考察调研</p>
              <div class="el_divider">
                <el-divider
                  ><span style="font-size:12px;color:#999"
                    >2020年12月31日</span
                  ></el-divider
                >
              </div>
            </div>
          </a>
        </el-col>
        <el-col :span="span" class="el_col">
          <a href="https://news.sjtu.edu.cn/jdyw/20210104/139419.html">
            <img src="@/assets/images/20201230_060944_460.jpg" alt="" />
            <div class="des">
              <p>上海交通大学国家电投智慧能源创新学院成立</p>
              <div class="el_divider">
                <el-divider
                  ><span style="font-size:12px;color:#999"
                    >2020年12月29日</span
                  ></el-divider
                >
              </div>
            </div>
          </a>
        </el-col>
        <el-col :span="span" class="el_col">
          <a href="https://news.sjtu.edu.cn/jdyw/20210104/139419.html">
            <img src="@/assets/images/20201228_032935_315.jpg" alt="" />
            <div class="des">
              <p>“守初心、担使命、再出发” 长三角公立医院党建高峰论坛举行</p>
              <div class="el_divider">
                <el-divider
                  ><span style="font-size:12px;color:#999"
                    >2020年12月28日</span
                  ></el-divider
                >
              </div>
            </div>
          </a>
        </el-col>
        <el-col :span="span" class="el_col">
          <a href="https://news.sjtu.edu.cn/jdyw/20210104/139419.html">
            <img src="@/assets/images/20210103_025318_415.jpg" alt="" />
            <div class="des">
              <p>“文博有你 妙趣横生”上海交大2021迎新文博庙会开启</p>
              <div class="el_divider">
                <el-divider
                  ><span style="font-size:12px;color:#999"
                    >2021年01月01日</span
                  ></el-divider
                >
              </div>
            </div>
          </a>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  computed: {
    span() {
      let col_span = 6;
      switch (this.$store.state.device) {
        case "pc":
          col_span = 6;
          break;
        case "mobile":
          col_span = 24;
          break;
        default:
          col_span = 12;
          break;
      }
      return col_span;
    }
  }
};
</script>

<style scoped lang="scss">
.model {
  width: $base-width;
  margin: 0 auto;
  @media only screen and (min-width: 480px) and (max-width: 1200px) {
    /* 这里写宽度大于321px小于1024px的样式(一般是平板电脑) */
    width: 100%;
  }
  @media screen and (min-width: 320px) and (max-width: 480px) {
    /* 在这里写小屏幕设备的样式 */
    width: 100%;
  }
  .el_col {
    a {
      display: block;
      background-color: #ffffff;
      .des {
        position: relative;
        padding: 8px 5px;
        height: 80px;
        p {
          font-size: 9px;
          padding: 0 10px;
          line-height: 16px;
          color: #333;
          &:hover {
            color: $base-color;
          }
        }
        .el_divider {
          position: absolute;
          width: 100%;
          bottom: 0;
          left: 0;
        }
      }
      img {
        width: 100%;
      }
    }
  }
}
</style>
